<template>
<div>
     <!--面包屑导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
     <!--卡片视图区域-->
     <el-card>
        <!--添加角色区域-->
        <el-row>
            <el-col>
                <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
            </el-col>
        </el-row>
         <!--表格区域-->
      <tree-table class="TreeTable" :data="catelist" :columns="columns" :selection-type="false"
      :expand-type="false" show-index index-text="#" border>
       <!--是否有效-->
       <template slot="isok" slot-scope="scope">
           <i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color:violet;"></i>
           <i class="el-icon-error" v-else style="color:red;"></i>
       </template>
       <!--排序-->
       <template slot="order" slot-scope="scope">
           <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
           <el-tag type="success" size="mini" v-else-if="scope.row.cat_level===1">二级</el-tag>
          <el-tag type="warning" size="mini" v-else>三级</el-tag>
       </template>
       <!--操作-->
       <template slot="opt" slot-scope="scope">
           <el-button type="primary" icon="el-icon-edit" size="mini"  @click="showEditCateDialog(scope.row.cat_id)">编辑</el-button>
           <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCate(scope.row.cat_id)">删除</el-button>
       </template>
     </tree-table>
          <!--分页区域-->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="querInfo.pagenum"
      :page-sizes="[3, 5, 10, 15]"
      :page-size="querInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
     </el-card>
      <!--添加分类的对话框-->
     <el-dialog
  title="添加分类"
  :visible.sync="addCateDialogVisible"
  width="50%" @close="addCateDialogClosed"
>

  <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="80px">
  <el-form-item label="分类名称" prop="cat_name">
    <el-input v-model="addCateForm.cat_name"></el-input>
  </el-form-item>
   <el-form-item label="父级分类">
    <el-cascader class="el-cascader-menu" expand-Trigger="hover"
    :options="parentCateList"
    :props="cascaderProps"
    v-model="selectedKeys"
    @change="parentCateChanged" clearable change-on-select>
    </el-cascader>
  
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
     </el-dialog>
      <!-- 编辑分类的对话框 -->
        <el-dialog title="编辑分类" :visible.sync="editCateDialogVisible" width="50%">
            <el-form
                    :model="editCateForm"
                    :rules="editCateFormRules"
                    ref="editCateFormRef"
                    label-width="100px"
            >
                <el-form-item label="分类名称：" prop="cat_name">
                    <el-input v-model="editCateForm.cat_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="editCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="eidtCate">确 定</el-button>
      </span>
        </el-dialog>

</div> 
</template>
<script>
export default {
data(){
    return{
            //查询条件
            querInfo:{
                type:3,
                pagenum:1,
                pagesize:5
            },
        //商品分类的数据列表，默认为空
        catelist:[],
        //总数据条数
        total:0,
        //为table指定列的定义
        columns:[
            {
               label:'分类名称' ,
               prop:'cat_name'
            },{
                label:'是否有效',
                //当前列定义为模板列
                type:'template',
                //当亲列的模板名称
                template:'isok'
            },
            {
                label:'排序',
                //当前列定义为模板列
                type:'template',
                //当亲列的模板名称
                template:'order'
            },
             {
                label:'操作',
                //当前列定义为模板列
                type:'template',
                //当亲列的模板名称
                template:'opt'
            }
        ],
        addCateDialogVisible:false,
        addCateForm:{
            //将要添加的分类的名称
            cat_name:'',
            cat_pid:0,
            //分类的等级默认为一级分类
            cat_level:0

        },
        //添加表单的分类规则对象
        addCateFormRules:{
            cat_name:[
             { required: true, message: '请输入分类名称', trigger: 'blur' }
            //   {min:3,max:10,message:'用户名的长度在3到10个字符之间',trigger:'blur'}
            ]
        },
        //父级分类的列表
           parentCateList: [],
           cascaderProps:{
               value:'cat_id',
               label:'cat_name',
               children: 'children'
           },
           selectedKeys:[],

           // 编辑对话框 控制
                editCateDialogVisible: false,
                // 编辑分类表单验证
                editCateFormRules: {
                    cat_name: [
                        {required: true, message: '请输入分类名称', trigger: 'blur'}
                    ]
                },
                // 编辑表单 绑定对象
                editCateForm: ''
     }
        
        
    },
    created(){
        this.getCateList()
    },
    methods:{
        //获取商品分类数据
       async getCateList(){
          const {data:res}= await this.$http.get('categories',{params:this.querInfo})
         if(res.meta.status!==200){
             return this.$message.error('获取商品分类失败')
         }
         //吧列表数据赋值给catelist
         this.catelist=res.data.result
         //总数居i桉树赋值
         this.total=res.data.total
       },
       //监听分页处理函数
       handleSizeChange(newsize){
          this.querInfo.pagesize=newsize
          this.getCateList()
       },
       //监听pagenum的改变
       handleCurrentChange(newPage){
       this.querInfo.pagenum=newPage
       this.getCateList()
       },
       showAddCateDialog(){
           //先获取父级分类的数据列表
           this.getParentCateList()
           //在展示出对话框
           this.addCateDialogVisible=true
       },
       //获取父级分类的数据列表
     async getParentCateList(){
      const {data:res} =await this.$http.get('categories',{params:{
            type:2
        }})
        if(res.meta.status!==200){
            return this.$message.error('获取数据失败')
        }
        console.log(res.data)
        this.parentCateList=res.data
      },
      //选择项发生变化触发这个函数
      parentCateChanged(){
         console.log(this.selectedKeys)
         //如果selectedKeys数组中length大于0，证明选中父级分类
         //贩子没有选中
         if(this.selectedKeys.length>0){
             //父级父类的id
    this.addCateForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
        //为当前分类的等级赋值
        this.addCateForm.cat_level=this.selectedKeys.length
        return
          } else{
       //父级父类的id
    this.addCateForm.cat_pid=0
        //为当前分类的等级赋值
        this.addCateForm.cat_level=0
  }
      },
      //点击按钮，添加新的分类
      addCate(){
         this.$refs.addCateFormRef.validate(async valid=>{
             if(!valid) return
           
           const{data:res}= await this.$http.post('categories',this.addCateForm)
                 if(res.meta.status!==201){
          return this.$message.error('添加分类失败')
                 }
                 this.$message.success('添加分类成功')
                 this.getCateList()
                 this.addCateDialogVisible=false
         })
      },
      //监听对话框的关闭事件，重置表单数据
      addCateDialogClosed(){
         this.$refs.addCateFormRef.resetFields()
         this.selectedKeys=[]
         this.addCateForm.cat_level=0
         this.addCateForm.cat_pid=0
      },
      //删除分类
      async removeCate(id) {
                const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除！')
                }
                const {data: res} = await this.$http.delete('categories/' + id)
                if (res.meta.status !== 200) {
                    return this.$message.error('删除商品分类失败！')
                }
                this.$message.success('删除商品分类成功！')
                this.getCateList()
            },
            //显示编辑对话框
             async showEditCateDialog(id) {
                const {data: res} = await this.$http.get('categories/' + id)
                if (res.meta.status !== 200) return this.$message.error('获取分类失败！')
                this.editCateForm = res.data
                this.editCateDialogVisible = true
            },
               // 编辑分类名
            eidtCate() {
                this.$refs.editCateFormRef.validate(async valid => {
                    if (!valid) return
                    const {data: res} = await this.$http.put('categories/' + this.editCateForm.cat_id,
                        {
                            cat_name: this.editCateForm.cat_name
                        })
                    if (res.meta.status !== 200) return this.$message.error('更新分类名失败！')
                    this.$message.success('更新分类名成功！')
                    this.getCateList()
                    this.editCateDialogVisible = false
                })
            }

       }

}
</script>
<style lang="less" scoped>
.TreeTable{
    margin-top: 20px;
}
</style>